const payVoucherTemplate = `
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>财务凭证信息</span>
    </div>
    <div>
    <el-form ref="form" label-suffix=":" disabled label-width="117px" size="small">
      <el-row>
      <el-col :span="6">
        <el-form-item label="缴费凭证">
          <el-upload
            action="#"
            ref="jiaofei"
            :file-list="jiaofeiFile"
            list-type="picture-card"
            :on-preview="handlePicturePreview">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="优惠凭证">
          <el-upload
            action="#"
            ref="youhui"
            :file-list="youhuiFile"
            list-type="picture-card"
            :on-preview="handlePicturePreview">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="其他凭证">
          <el-upload
            action="#"
            ref="qita"
            :file-list="qitaFile"
            list-type="picture-card"
            :on-preview="handlePicturePreview">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="退款凭证">
          <el-upload
            action="#"
            ref="tuikuan"
            :file-list="tuikuanFile"
            list-type="picture-card"
            :on-preview="handlePicturePreview">
            <i style="line-height: 148px;" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-card>
`;

Vue.component('app-pay-voucher', {
  name: 'app-pay-voucher',
  template: payVoucherTemplate,
  props: ['fileMap'],
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
    };
  },
  computed: {
    jiaofeiFile() {
      const fileList = this.fileMap.filter(
        (item) => item.property === 'jiaofei'
      );
      const file = fileList[fileList.length - 1];
      if (file) {
        this.$refs.jiaofei.$children[1].$el.style = 'display: none;';
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.jiaofei.$children[1].$el.style = 'display: block;';
        });
        return [];
      }
    },
    youhuiFile() {
      const fileList = this.fileMap.filter(
        (item) => item.property === 'youhui'
      );
      const file = fileList[fileList.length - 1];
      if (file) {
        this.$refs.youhui.$children[1].$el.style = 'display: none;';
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.youhui.$children[1].$el.style = 'display: block;';
        });
        return [];
      }
    },
    qitaFile() {
      const fileList = this.fileMap.filter((item) => item.property === 'qita');
      const file = fileList[fileList.length - 1];
      if (file) {
        this.$refs.qita.$children[1].$el.style = 'display: none;';
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.qita.$children[1].$el.style = 'display: block;';
        });
        return [];
      }
    },
    tuikuanFile() {
      const fileList = this.fileMap.filter(
        (item) => item.property === 'tuikuan'
      );
      const file = fileList[fileList.length - 1];
      if (file) {
        this.$refs.tuikuan.$children[1].$el.style = 'display: none;';
        return [
          {
            name: file.property,
            url: `/apistudentInfo/picDownload?url=${encodeURIComponent(
              file.fileResource
            )}`,
          },
        ];
      } else {
        this.$nextTick(() => {
          this.$refs.tuikuan.$children[1].$el.style = 'display: block;';
        });
        return [];
      }
    },
  },
  methods: {
    handlePicturePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
});
